<template>
  <div v-loading="loading">
    <el-table
      ref="GTable"
      v-bind="$attrs"
      v-on="$listeners"
      :data="data"
      :border="border"
      :header-cell-style="headerCellStyle"
    >
      <template v-if="$slots.append" slot="append">
        <slot name="append"></slot>
      </template>
      <el-table-column
        v-if="hasSelection"
        type="selection"
        width="60"
        align="center"
        :reserve-selection="reserveSelection"
      ></el-table-column>
      <el-table-column
        v-if="hasIndex"
        type="index"
        width="64"
        label="序号"
        align="center"
        :index="(index) => customIndex(index)"
      ></el-table-column>
      <template v-for="(item, index) in fields">
        <el-table-column
          :key="item.prop + index"
          v-bind="item"
          align="center"
     
          :show-overflow-tooltip="item.label == '操作' ? false : true"
        >
          <template slot-scope="scope">
            <span v-if="$scopedSlots[item.prop]">
              <slot :name="item.prop" v-bind="scope"></slot>
            </span>
            <span v-else>{{ scope.row[item.prop] || '-' }}</span>
          </template>
        </el-table-column>
      </template>
      <template slot="empty">
        <el-empty v-if="isEmpty" :image-size="80"></el-empty>
      </template>
    </el-table>
    <div class="page" v-if="hasPagination">
      <el-pagination
        ref="page"
        v-bind="paginationOptions"
        :total="paginationOptions.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
const defaultPagination = {
  pageSizes: [10, 20, 50, 100],
  layout: 'total, sizes ,prev, pager, next, jumper, ->',
  background: true
};
export default {
  name: 'GTable',
  props: {
    // table
    data: {
      default: () => [],
      type: Array
    },
    fields: {
      default: () => [],
      type: Array
    },
    border: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    reserveSelection: {
      type: Boolean,
      default: false
    },
    hasSelection: {
      default: true,
      type: Boolean
    },
    hasIndex: {
      default: true,
      type: Boolean
    },
    isEmpty: { default: true, type: Boolean },
    headerCellStyle: {
      type: Object,
      default: () => {
        return {
          background: '#F4F7FF',
          fontWeight: 'bold',
          color: '#52555B'
        };
      }
    },
    // pagination
    hasPagination: {
      default: true,
      type: Boolean
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          total: 0, // 总数
          page: 1, // 当前页
          size: 10 // 每页显示数据的最大数量
        };
      }
    }
  },
  computed: {
    paginationOptions() {
      return { ...defaultPagination, ...this.pagination };
    },
    page: {
      get() {
        return this.paginationOptions.page;
      },
      set(val) {
        this.paginationOptions.page = val;
      }
    },
    size: {
      get() {
        return this.paginationOptions.size;
      },
      set(val) {
        this.paginationOptions.size = val;
      }
    }
  },

  mounted(){
    console.log(this.$attrs);
  },

  methods: {
    // 当前页面改变
    handleCurrentChange(page) {
      this.$emit('pagination-change', { page, size: this.size });
    },
    // 页码大小改变
    handleSizeChange(size) {
      this.$emit('pagination-change', { page: this.page, size });
    },

    // renderHeader(h, { column }) {
    //   return h(
    //     'el-tooltip',
    //     {
    //       props: {
    //         effect: 'dark',
    //         content: column.label,
    //         placement: 'top'
    //       }
    //     },
    //     [h('span', column.label)]
    //   );
    // },
    customIndex(index) {
      return index + (this.paginationOptions.page - 1) * this.paginationOptions.size + 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  height: 48px;
  justify-content: flex-end;
  align-items: center;
}
</style>
